//AutomationDialog.vue
<template>
    <el-dialog v-model="visible" :title="dialogTitle" width="1200px" :close-on-click-modal="false"
        class="automation-dialog">
        <div class="automation-form">
            <!-- 任务名称 -->
            <div class="name-section">
                <div class="input-wrapper">
                    <el-input v-model="formData.name" placeholder="请输入任务名称" class="task-name-input">
                        <template #prefix>
                            <el-icon class="name-icon">
                                <Document />
                            </el-icon>
                        </template>
                    </el-input>
                </div>
                <div class="divider"></div>
            </div>

            <!-- 主配置区域 -->
            <div class="config-container">
                <!-- 条件配置 -->
                <div class="config-section">
                    <div class="section-header">
                        <span class="title">条件</span>
                        <el-radio-group v-model="formData.conditionMode" size="small">
                            <el-radio-button label="any">单一满足</el-radio-button>
                            <el-radio-button label="all">同时满足</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="content-box">
                        <div v-for="(condition, index) in formData.conditions" :key="index" class="item-wrapper">
                            <div class="item-card">
                                <el-select v-model="condition.type" placeholder="选择条件类型" class="full-width-select">
                                    <el-option label="时间" value="time" />
                                    <el-option label="传感器" value="sensor" />
                                </el-select>

                                <div class="sub-item" v-if="condition.type === 'time'">
                                    <el-select v-model="condition.frequency" placeholder="频率" class="full-width-select">
                                        <el-option label="每天" value="daily" />
                                        <el-option label="工作日" value="workday" />
                                        <el-option label="周末" value="weekend" />
                                    </el-select>
                                    <el-time-picker v-model="condition.timeValue" format="HH:mm" placeholder="时间"
                                        class="full-width-select" />
                                </div>

                                <div class="sub-item" v-if="condition.type === 'sensor'">
                                    <el-select v-model="condition.sensorType" placeholder="传感器"
                                        class="full-width-select">
                                        <el-option label="人体传感器" value="motion" />
                                    </el-select>
                                    <el-select v-model="condition.status" placeholder="状态" class="full-width-select">
                                        <el-option label="有人" value="present" />
                                        <el-option label="无人" value="absent" />
                                    </el-select>
                                </div>
                            </div>
                            <el-button type="danger" circle size="small" @click="removeItem(formData.conditions, index)"
                                v-if="formData.conditions.length > 1" class="remove-btn">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </div>
                        <el-button link type="primary" @click="addCondition" class="add-btn">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            新增条件
                        </el-button>
                    </div>
                </div>

                <!-- 设备配置 -->
                <div class="config-section">
                    <div class="section-header">
                        <span class="title">设备</span>
                    </div>
                    <div class="content-box">
                        <div class="item-wrapper">
                            <div class="item-card">
                                <el-cascader v-model="formData.devices" :options="deviceOptions" :props="{
                                    multiple: true,
                                    expandTrigger: 'hover'
                                }" placeholder="选择设备" class="full-width-select" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 行为配置 -->
                <div class="config-section">
                    <div class="section-header">
                        <span class="title">行为</span>
                    </div>
                    <div class="content-box">
                        <div v-for="(action, index) in formData.actions" :key="index" class="item-wrapper">
                            <div class="item-card">
                                <el-select v-model="action.type" placeholder="选择行为" class="full-width-select">
                                    <el-option label="开启" value="on" />
                                    <el-option label="关闭" value="off" />
                                    <el-option label="调节" value="adjust" />
                                </el-select>
                            </div>
                            <el-button type="danger" circle size="small" @click="removeItem(formData.actions, index)"
                                v-if="formData.actions.length > 1" class="remove-btn">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </div>
                        <el-button link type="primary" @click="addAction" class="add-btn">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            新增行为
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Plus, Delete, Document } from '@element-plus/icons-vue'

const props = defineProps({
    modelValue: Boolean,
    automationData: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:modelValue', 'save'])

const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

const dialogTitle = computed(() =>
    props.automationData?.id ? '编辑自动化' : '新建自动化'
)

const deviceOptions = [
    {
        label: '照明',
        value: 'light',
        children: [
            { label: '1楼前排教室灯光', value: 'floor1_front' },
            { label: '1楼后排教室灯光', value: 'floor1_back' },
            { label: '1楼2教室灯光', value: 'floor1_room2' }
        ]
    },
    {
        label: '空调',
        value: 'ac',
        children: [
            { label: '1楼空调', value: 'floor1_ac' },
            { label: '2楼空调', value: 'floor2_ac' }
        ]
    }
]

const formData = ref({
    name: '自动化任务1',
    conditionMode: 'any',
    conditions: [{
        type: 'time',
        frequency: 'daily',
        timeValue: null
    }],
    devices: [],
    actions: [{
        type: ''
    }]
})

const addCondition = () => {
    formData.value.conditions.push({
        type: 'time',
        frequency: 'daily',
        timeValue: null
    })
}



const addAction = () => {
    formData.value.actions.push({
        type: ''
    })
}

const removeItem = (array, index) => {
    if (array.length > 1) {
        array.splice(index, 1)
    }
}

const handleCancel = () => {
    visible.value = false
}

const handleConfirm = () => {
    emit('save', { ...formData.value })
    visible.value = false
}
</script>

<style lang="scss" scoped>
.automation-dialog {
    :deep(.el-dialog__header) {
        margin: 0;
        padding: var(--gap-normal) var(--gap-normal) 0;

        .el-dialog__title {
            font-size: var(--font-size-medium);
            font-weight: var(--font-weight-primary);
            color: var(--color-text-primary);
        }
    }

    :deep(.el-dialog__body) {
        padding: var(--gap-normal);
    }

    .automation-form {
        .name-section {
            margin-bottom: var(--gap-normal);

            .input-wrapper {
                display: flex;
                align-items: center;
                margin-bottom: var(--gap-normal);

                .task-name-input {
                    width: 300px;

                    :deep(.el-input__wrapper) {
                        box-shadow: none;
                        border: 1px solid var(--color-border);
                    }
                }
            }
        }

        .config-container {
            display: flex;
            gap: var(--gap-normal);

            .config-section {
                flex: 1;
                min-width: 0;

                .section-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: var(--gap-normal);

                    .title {
                        font-size: var(--font-size-base);
                        font-weight: var(--font-weight-primary);
                        color: var(--color-text-primary);
                    }
                }

                .content-box {
                    background-color: white;
                    padding: var(--gap-normal);
                    border-radius: var(--el-border-radius-base);
                    border: 1px solid var(--color-border);
                    min-height: 300px;

                    .item-wrapper {
                        display: flex;
                        gap: var(--gap-small);
                        margin-bottom: var(--gap-normal);

                        .item-card {
                            flex: 1;
                            background-color: var(--color-background);
                            padding: var(--gap-normal);
                            border-radius: var(--el-border-radius-base);

                            .sub-item {
                                margin-top: var(--gap-small);
                                display: flex;
                                gap: var(--gap-small);
                            }
                        }

                        .remove-btn {
                            flex-shrink: 0;
                            align-self: center;
                        }
                    }

                    .add-btn {
                        width: 100%;
                        justify-content: center;
                        border-top: 1px solid var(--color-border);
                        margin-top: var(--gap-small);
                        padding-top: var(--gap-small);
                    }
                }
            }
        }
    }

    .divider {
        height: 1px;
        background-color: var(--color-border);
        margin: var(--gap-normal) 0;
    }

    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--gap-small);
        padding-top: var(--gap-normal);
        border-top: 1px solid var(--color-border);
    }
}

:deep(.el-select),
:deep(.el-cascader),
:deep(.el-time-picker) {
    width: 100% !important;

    .el-input__wrapper {
        box-shadow: none;
        border: 1px solid var(--color-border);
    }
}

.full-width-select {
    width: 100% !important;
}
</style>